:root {
            --amarillo:    #ffcd00;
            --amarillo-dk: #e6b800;
            --negro:       #111111;
            --gris-900:    #1a1a1a;
            --gris-800:    #242424;
            --gris-400:    #888;
            --blanco:      #ffffff;
        }
        *, *::before, *::after { box-sizing: border-box; }
        html, body { overflow-x: hidden; max-width: 100vw; margin: 0; }
        body {
            font-family: 'DM Sans', system-ui, sans-serif;
            background: var(--gris-900);
            min-height: 100vh;
            color: var(--blanco);
        }
        .container-fluid { padding: 0; }
        .row { margin: 0; }

        /* ── Panel izquierdo institucional ── */
        .panel-info {
            background: var(--negro);
            color: var(--blanco);
            padding: 3rem 2.5rem;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .panel-info::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 5px;
            background: var(--amarillo);
        }
        .panel-info::after {
            content: '';
            position: absolute;
            bottom: -150px; right: -150px;
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(255,205,0,.1) 0%, transparent 70%);
            border-radius: 50%;
        }
        .panel-brand {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2.5rem;
        }
        .panel-brand-icon {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            font-weight: 900;
            color: var(--negro);
            border: 2px solid var(--negro);
            box-shadow: 3px 3px 0 var(--amarillo);
        }
        .panel-brand-text { font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
        .panel-brand-sub  { font-size: .75rem; color: var(--gris-400); font-weight: 500; }

        .panel-title {
            font-size: clamp(1.5rem, 3vw, 2rem);
            font-weight: 900;
            line-height: 1.2;
            margin-bottom: 1.25rem;
        }
        .panel-title span { color: var(--amarillo); }

        .panel-text {
            color: rgba(255,255,255,.7);
            font-size: 1rem;
            line-height: 1.65;
            margin-bottom: 2rem;
            max-width: 480px;
        }

        .panel-features {
            display: flex;
            flex-direction: column;
            gap: .85rem;
            margin-bottom: 2rem;
        }
        .feature-item {
            display: flex;
            align-items: center;
            gap: .85rem;
            font-size: .9rem;
            color: rgba(255,255,255,.85);
        }
        .feature-icon {
            width: 32px;
            height: 32px;
            background: rgba(255,205,0,.15);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--amarillo);
            flex-shrink: 0;
            font-size: .9rem;
            border: 1px solid rgba(255,205,0,.25);
        }

        .panel-footer {
            position: absolute;
            bottom: 1.5rem;
            left: 2.5rem;
            font-size: .7rem;
            color: rgba(255,255,255,.35);
        }

        /* ── Panel derecho login ── */
        .panel-login {
            background: var(--gris-900);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3rem 1.5rem;
        }

        .login-box {
            width: 100%;
            max-width: 430px;
            background: var(--blanco);
            border-radius: 18px;
            padding: 2.5rem 2.25rem;
            border: 2px solid var(--negro);
            box-shadow: 6px 6px 0 var(--amarillo);
            position: relative;
            overflow: hidden;
            color: var(--negro);
        }
        .login-box::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 4px;
            background: var(--amarillo);
        }

        .login-badge {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--negro);
            background: var(--amarillo);
            padding: .3rem .8rem;
            border-radius: 999px;
            margin-bottom: 1.25rem;
            border: 1.5px solid var(--negro);
        }

        .login-title {
            font-size: 1.45rem;
            font-weight: 900;
            color: var(--negro);
            margin-bottom: .5rem;
            line-height: 1.2;
        }

        .login-sub {
            color: #666;
            font-size: .92rem;
            line-height: 1.55;
            margin-bottom: 2rem;
        }

        .btn-microsoft {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .75rem;
            width: 100%;
            padding: 1rem 1.25rem;
            border: 2px solid var(--negro);
            border-radius: 10px;
            background: var(--negro);
            color: var(--blanco);
            font-size: .98rem;
            font-weight: 700;
            text-decoration: none;
            cursor: pointer;
            transition: all .18s;
            box-shadow: 4px 4px 0 var(--amarillo);
            font-family: 'DM Sans', sans-serif;
        }
        .btn-microsoft:hover {
            transform: translate(-2px,-2px);
            box-shadow: 6px 6px 0 var(--amarillo);
            color: var(--blanco);
            text-decoration: none;
        }
        .btn-microsoft:active {
            transform: translate(2px,2px);
            box-shadow: 2px 2px 0 var(--amarillo);
        }
        .ms-logo {
            display: inline-block;
            width: 22px;
            height: 22px;
            flex-shrink: 0;
        }

        .divider-text {
            display: flex;
            align-items: center;
            gap: .85rem;
            margin: 1.75rem 0 1.25rem;
            font-size: .72rem;
            color: #999;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .1em;
        }
        .divider-text::before, .divider-text::after {
            content: '';
            flex: 1;
            height: 1.5px;
            background: #e0e0e0;
        }

        .domain-info {
            background: #f8f8f8;
            border: 1.5px solid #e0e0e0;
            border-radius: 10px;
            padding: .85rem 1.1rem;
            font-size: .82rem;
            color: #555;
            line-height: 1.5;
        }
        .domain-info strong {
            color: var(--negro);
            font-weight: 700;
            background: var(--amarillo);
            padding: .05rem .4rem;
            border-radius: 4px;
            font-family: 'DM Mono', 'Courier New', monospace;
            font-size: .8rem;
        }

        .login-footer {
            text-align: center;
            font-size: .75rem;
            color: #999;
            margin-top: 1.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .4rem;
        }

        .error-banner {
            background: #fee2e2;
            border: 1.5px solid #fca5a5;
            color: #991b1b;
            padding: .75rem 1rem;
            border-radius: 10px;
            font-size: .85rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: .5rem;
        }

        /* ── Mobile ── */
        @@media (max-width: 991.98px) {
            .panel-info {
                min-height: auto;
                padding: 2rem 1.5rem;
            }
            .panel-info .panel-features { display: none; }
            .panel-info .panel-footer  { display: none; }
            .panel-login {
                min-height: auto;
                padding: 2rem 1rem;
            }
        }