/* ==========================================================
   LOGIN ENTERPRISE PREMIUM - MDS
   Variante A: Sobria corporativa (default)
   Variante B: Moderna con glow + profundidad
   ========================================================== */

:root {
    --bg-01: #070d18;
    --bg-02: #0c1c34;
    --bg-03: #102846;
    --panel-right-a: rgba(9, 20, 38, 0.82);
    --panel-right-b: rgba(15, 34, 62, 0.76);
    --glass: rgba(255, 255, 255, 0.10);
    --glass-strong: rgba(255, 255, 255, 0.16);
    --text-strong: #f5f9ff;
    --text-soft: #c6d5ea;
    --card-bg: rgba(255, 255, 255, 0.94);
    --card-border: rgba(17, 35, 63, 0.14);
    --shadow-shell: 0 34px 78px rgba(2, 8, 20, 0.5);
    --shadow-card: 0 18px 40px rgba(5, 12, 25, 0.30);
    --accent: #2f6ff0;
}

body.plaft-login {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: var(--text-strong);
    background:
        radial-gradient(1100px 620px at 12% 12%, rgba(47, 111, 240, 0.20), transparent 62%),
        radial-gradient(980px 600px at 86% 84%, rgba(33, 179, 154, 0.14), transparent 64%),
        linear-gradient(140deg, var(--bg-01) 0%, var(--bg-02) 48%, var(--bg-03) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    overflow: hidden;
}

body.plaft-login::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(158, 190, 230, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(158, 190, 230, 0.05) 1px, transparent 1px),
        linear-gradient(120deg, rgba(106, 149, 210, 0.06) 0%, transparent 38%);
    background-size: 34px 34px, 34px 34px, 100% 100%;
    mask-image: radial-gradient(circle at 50% 50%, black 42%, transparent 92%);
    opacity: 0.55;
}

body.plaft-login::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 0.75px, transparent 0.75px);
    background-size: 3px 3px;
    opacity: 0.055;
}

.auth-shell {
    position: relative;
    z-index: 2;
    width: min(1260px, 100%);
    min-height: 710px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: var(--shadow-shell);
    display: grid;
    grid-template-columns: 0.98fr 1.12fr;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    animation: shellIn 460ms ease-out;
}

.auth-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.24) 0%, transparent 26%, transparent 70%, rgba(255, 255, 255, 0.14) 100%);
    opacity: 0.32;
}

.brand-panel {
    position: relative;
    background: url('/Images/Login.jpg') center / cover no-repeat;
    filter: saturate(0.74) contrast(0.96);
}

.brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(118deg, rgba(6, 15, 31, 0.90) 0%, rgba(9, 24, 45, 0.70) 58%, rgba(10, 28, 49, 0.52) 100%),
        radial-gradient(680px 340px at 18% 16%, rgba(79, 136, 245, 0.22), transparent 66%);
}

.brand-panel::after {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background:
        repeating-linear-gradient(132deg, rgba(159, 196, 255, 0.075) 0 2px, transparent 2px 34px);
    opacity: 0.30;
    transform: rotate(-2deg);
}

.brand-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.brand-mark {
    max-width: 530px;
    padding: 20px 22px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(8, 19, 36, 0.46);
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

.brand-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.15) 46%, transparent 62%);
    transform: translateX(-130%);
    animation: sweep 6.8s ease-in-out infinite;
}

.brand-top-stack {
    display: grid;
    gap: 8px;
}

.brand-logo {
    width: 145px;
    height: auto;
}

.brand-word {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
}

.brand-subtitle {
    font-size: 0.93rem;
    color: #d5e2f4;
}

.brand-caption {
    max-width: 540px;
    font-size: 0.95rem;
    color: rgba(221, 233, 248, 0.94);
}

.form-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px;
    background: linear-gradient(145deg, var(--panel-right-a) 0%, var(--panel-right-b) 100%);
}

.form-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.06) 0%, transparent 34%, transparent 68%, rgba(255, 255, 255, 0.05) 100%);
}

.login-wrapper {
    position: relative;
    z-index: 2;
    width: min(560px, 100%);
    display: grid;
    gap: 22px;
}

.login-hero .secure-title {
    margin: 0 0 6px;
    font-size: 2.08rem;
    font-weight: 700;
    color: #f8fbff;
}

.login-hero .secure-subtitle {
    margin: 0;
    font-size: 1.04rem;
    font-weight: 600;
    color: #d3e1f5;
}

.login-hero p {
    margin: 8px 0 0;
    color: #c5d4e8;
    font-size: 0.96rem;
    line-height: 1.58;
}

.card-login {
    position: relative;
    border-radius: 18px;
    padding: 32px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
    color: #edf3fe;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 16px 38px rgba(5, 12, 25, 0.30);
    backdrop-filter: blur(12px);
    overflow: hidden;
    transform-origin: center;
    animation: cardIn 360ms ease-out;
}

.card-login::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 1;
}

.card-login::after {
    content: "";
    position: absolute;
    top: -180%;
    left: -40%;
    width: 62%;
    height: 360%;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
    transform: rotate(18deg);
    opacity: 0.28;
    animation: cardGlow 7.4s linear infinite;
}

.card-login h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f7fbff;
}

.card-login .muted {
    color: #c5d4ea;
    font-size: 0.9rem;
}

.card-login .alert-danger {
    background: rgba(185, 28, 28, 0.18);
    color: #ffd7d7;
    border: 1px solid rgba(248, 113, 113, 0.35);
}

.microsoft-signin {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 47px;
    border: 1px solid #8c8c8c;
    border-radius: 10px;
    background: #ffffff;
    color: #1f1f1f;
    font-size: 0.95rem;
    font-weight: 600;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.microsoft-signin:hover {
    background: #f4f4f4;
    border-color: #6f6f6f;
    color: #111111;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(16, 26, 44, 0.16);
}

.microsoft-signin:focus-visible {
    outline: 3px solid rgba(47, 111, 240, 0.44);
    outline-offset: 2px;
}

.login-meta-fixed {
    position: fixed;
    right: 22px;
    bottom: 16px;
    z-index: 3;
    display: inline-flex;
    gap: 8px;
    font-size: 0.73rem;
    color: rgba(207, 221, 241, 0.84);
}

.login-meta-fixed span {
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(7, 16, 31, 0.48);
}

/* Variante B: más glow y profundidad */
body.plaft-login.variant-b .auth-shell {
    border-color: rgba(124, 171, 255, 0.32);
    box-shadow: 0 34px 82px rgba(2, 8, 20, 0.56), 0 0 36px rgba(68, 136, 255, 0.16);
}

body.plaft-login.variant-b .brand-panel::before {
    background:
        linear-gradient(118deg, rgba(5, 14, 29, 0.92) 0%, rgba(10, 30, 58, 0.72) 58%, rgba(11, 35, 59, 0.52) 100%),
        radial-gradient(780px 360px at 16% 20%, rgba(95, 155, 255, 0.26), transparent 68%);
}

body.plaft-login.variant-b .brand-mark {
    border-color: rgba(143, 187, 255, 0.34);
    box-shadow: 0 0 0 1px rgba(123, 174, 255, 0.22) inset;
}

body.plaft-login.variant-b .form-panel {
    background: linear-gradient(142deg, rgba(7, 20, 38, 0.90) 0%, rgba(18, 42, 76, 0.78) 100%);
}

body.plaft-login.variant-b .card-login {
    background: linear-gradient(155deg, rgba(10, 25, 45, 0.96) 0%, rgba(13, 32, 58, 0.94) 100%);
    border-color: rgba(130, 175, 250, 0.30);
    box-shadow: 0 22px 52px rgba(7, 15, 30, 0.40), 0 0 18px rgba(63, 126, 238, 0.10);
}

/* Access denied compatibility */
body.plaft-login.plaft-denied .login-hero .secure-title,
body.plaft-login.plaft-denied .card-login h2 {
    color: #b91c1c;
}

body.plaft-login.plaft-denied .card-login {
    border-color: rgba(185, 28, 28, 0.28);
}

.denied-text {
    color: #334155;
    font-size: 0.92rem;
    line-height: 1.5;
}

.denied-actions {
    display: grid;
    gap: 10px;
}

@keyframes shellIn {
    from { opacity: 0; transform: scale(0.985) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sweep {
    0% { transform: translateX(-130%); }
    42% { transform: translateX(-130%); }
    58% { transform: translateX(135%); }
    100% { transform: translateX(135%); }
}

@keyframes cardGlow {
    0% { transform: translateX(-45%) rotate(18deg); }
    55% { transform: translateX(-45%) rotate(18deg); }
    100% { transform: translateX(210%) rotate(18deg); }
}

@media (max-width: 1120px) {
    .auth-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .brand-panel {
        min-height: 220px;
    }

    .brand-content {
        padding: 20px;
        justify-content: flex-start;
        gap: 10px;
    }

    .brand-caption {
        font-size: 0.88rem;
    }

    .form-panel {
        padding: 28px 22px;
    }
}

@media (max-width: 720px) {
    body.plaft-login {
        padding: 10px;
    }

    .auth-shell {
        border-radius: 16px;
    }

    .brand-panel {
        min-height: 150px;
    }

    .brand-panel::after,
    .brand-caption,
    .brand-subtitle {
        display: none;
    }

    .brand-mark {
        max-width: none;
        width: 100%;
        padding: 14px;
    }

    .brand-logo {
        width: 120px;
    }

    .brand-word {
        font-size: 1.5rem;
    }

    .login-hero .secure-title {
        font-size: 1.62rem;
    }

    .login-hero .secure-subtitle {
        font-size: 0.94rem;
    }

    .card-login {
        padding: 22px;
    }

    .login-meta-fixed {
        right: 10px;
        bottom: 8px;
    }
}

/* Logout completed */
.logout-shell {
    width: min(520px, calc(100% - 24px));
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    padding: 28px;
    box-shadow: 0 18px 42px rgba(3, 10, 22, 0.34);
    text-align: center;
    animation: cardIn 300ms ease-out;
}

.logout-icon-wrap {
    width: 62px;
    height: 62px;
    border-radius: 999px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    background: rgba(15, 157, 118, 0.18);
    border: 1px solid rgba(52, 211, 153, 0.34);
}

.logout-icon-wrap i {
    color: #7ff3cf;
    font-size: 1.7rem;
}

.logout-title {
    margin: 0 0 8px;
    font-size: 1.85rem;
    color: #f6f9ff;
    border: 0;
}

.logout-text {
    margin: 0;
    color: #d4e0f1;
    line-height: 1.6;
}

.logout-link-wrap {
    margin-top: 10px;
    color: #cad8ec;
}

.logout-link-wrap a {
    color: #99c8ff;
    font-weight: 700;
}

.logout-link-wrap a:hover {
    color: #c4e0ff;
}