:root {
            --bg-color: #090d16;
            --card-bg: rgba(15, 23, 42, 0.45);
            --border-glow: rgba(99, 102, 241, 0.15);
            --primary-glow: linear-gradient(135deg, #4f46e5, #3b82f6);
            --primary-hover: linear-gradient(135deg, #6366f1, #60a5fa);
        }

        body {
            background-color: var(--bg-color);
            background-image: 
                radial-gradient(at 0% 0%, rgba(79, 70, 229, 0.15) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.12) 0px, transparent 50%);
            min-height: 100vh;
            font-family: 'Outfit', sans-serif;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-x: hidden;
        }

        .login-wrapper {
            width: 100%;
            min-height: 100vh;
            display: flex;
            position: relative;
        }

        /* Orbe decorativo flotante en el fondo */
        .decor-orb {
            position: absolute;
            width: 350px;
            height: 350px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
            filter: blur(40px);
            pointer-events: none;
            z-index: 1;
        }
        .orb-left { top: 10%; left: -5%; }
        .orb-right { bottom: 10%; right: 25%; }

        .left-panel {
            flex: 1.3;
            background: linear-gradient(135deg, rgba(9, 13, 22, 0.88), rgba(15, 23, 42, 0.93)), url('https://images.unsplash.com/photo-1629909613654-28e377c37b09?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4rem;
            position: relative;
        }

        .left-panel::after {
            content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at center, transparent 30%, var(--bg-color) 100%);
            pointer-events: none;
        }

        .right-panel {
            width: 520px;
            background: rgba(9, 13, 22, 0.5);
            backdrop-filter: blur(20px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3rem;
            box-shadow: -15px 0 35px rgba(0,0,0,0.6);
            z-index: 10;
            border-left: 1px solid rgba(255, 255, 255, 0.05);
        }

        .login-box {
            width: 100%;
            max-width: 400px;
            background: var(--card-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            padding: 3rem 2.5rem;
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.07);
            box-shadow: 
                0 30px 60px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            position: relative;
            z-index: 5;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .login-box:hover {
            border-color: rgba(99, 102, 241, 0.3);
            box-shadow: 
                0 30px 60px rgba(99, 102, 241, 0.05),
                0 30px 60px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .brand-mark {
            width: 64px;
            height: 64px;
            background: var(--primary-glow);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            font-weight: 700;
            color: #fff;
            box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
            margin-bottom: 1.75rem;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .brand-mark:hover {
            transform: scale(1.08) rotate(5deg);
        }

        .form-control-dark {
            background: rgba(15, 23, 42, 0.6) !important;
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #f8fafc;
            border-radius: 12px;
            padding: 0.85rem 1.1rem;
            font-size: 0.95rem;
            transition: all 0.25s ease;
        }

        .form-control-dark:focus {
            background: rgba(15, 23, 42, 0.8) !important;
            border-color: #6366f1;
            color: #ffffff;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
        }

        .form-control-dark::placeholder { color: #475569; }

        .btn-primary-dental {
            background: var(--primary-glow);
            border: none;
            border-radius: 12px;
            padding: 0.95rem;
            font-weight: 600;
            font-size: 1rem;
            width: 100%;
            color: white;
            transition: all 0.25s ease;
            box-shadow: 0 6px 20px rgba(79, 70, 229, 0.25);
            position: relative;
            overflow: hidden;
        }

        .btn-primary-dental:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(79, 70, 229, 0.4);
            background: var(--primary-hover);
        }

        .btn-primary-dental:active {
            transform: translateY(1px);
        }

        .input-group-text-dark {
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-left: none;
            color: #64748b;
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .input-group-text-dark:hover { color: #f8fafc; }

        .feature-item {
            display: flex; gap: 14px; align-items: center;
            padding: 0.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.04);
            color: #cbd5e1; font-weight: 300;
            transition: transform 0.2s ease;
        }

        .feature-item:hover {
            transform: translateX(6px);
        }

        .feature-item i { 
            color: #818cf8; 
            font-size: 1.25rem; 
            background: rgba(99, 102, 241, 0.12);
            padding: 8px;
            border-radius: 10px;
        }

        /* Corrección de Responsividad */
        @@media (max-width: 1199px) {
            .right-panel { width: 460px; }
        }
        @@media (max-width: 991px) {
            .left-panel { display: none; }
            .right-panel { width: 100%; box-shadow: none; padding: 1.5rem; background: var(--bg-color); }
            .login-box { max-width: 460px; }
            .decor-orb { display: block; }
        }
        @@media (max-width: 480px) {
            .right-panel { padding: 1rem; }
            .login-box { padding: 2rem 1.5rem; border-radius: 20px; }
            .brand-mark { width: 56px; height: 56px; font-size: 26px; }
        }
    </style>
</head>
<body>
    <div class="login-wrapper">
        <!-- Orbes decorativos Glassmorphism -->
        <div class="decor-orb orb-left"></div>
        <div class="decor-orb orb-right"></div>

        <!-- Panel izquierdo (Hero Section) -->
        <div class="left-panel">
            <div style="max-width:450px; position:relative; z-index:10;">
                <h2 class="mb-3 text-white" style="font-weight:700; letter-spacing:-0.5px;">Control Clínico Absoluto.</h2>
                <p style="color:#94a3b8; font-size:1.05rem; line-height:1.6; font-weight:300;">
                    El estándar definitivo ("Dark Premium") para operar y administrar clínicas dentales modernas con velocidad y precisión.
                </p>
                <div class="mt-4">
                    <div class="feature-item"><i class="bi bi-calendar-check"></i> Agenda Inteligente en Tiempo Real</div>
                    <div class="feature-item"><i class="bi bi-person-hearts"></i> Odontograma Digital Evolutivo</div>
                    <div class="feature-item"><i class="bi bi-wallet2"></i> Pasarela de Facturación y Reportes</div>
                    <div class="feature-item"><i class="bi bi-box-seam"></i> Inventario Clínico Activo</div>
                </div>
            </div>
        </div>

        <!-- Panel derecho (Auth Form) -->
        <div class="right-panel">
            <div class="login-box">
                <div class="text-center mb-4">
                    <div class="brand-mark mx-auto">
                        <i class="bi bi-tooth"></i>
                    </div>
                    <h4 class="text-white mb-1" style="font-weight:600;">OdonSystemDM</h4>
                    <span style="color:#64748b; font-size:0.9rem;">Acceso Seguro a la Plataforma</span>
                </div>

                @if (TempData["Error"] != null)
                {
                    <div class="alert alert-danger py-2 px-3 d-flex align-items-center mb-3" style="font-size:0.85rem; border-radius:10px; background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.3); color:#fca5a5;">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
                        <span class="mb-0">@TempData["Error"]</span>
                    </div>
                }

                @if (!ViewData.ModelState.IsValid)
                {
                    <div class="alert alert-danger py-2 px-3 d-flex align-items-center" style="font-size:0.85rem; border-radius:10px; background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.3); color:#fca5a5;">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
                        @Html.ValidationSummary(false, "", new { @class = "mb-0" })
                    </div>
                }

                <form method="post" asp-controller="Auth" asp-action="Login" asp-route-tenant="@Context.Request.Query["tenant"]">
                    @Html.AntiForgeryToken()

                    <div class="mb-4">
                        <label class="form-label" style="color:#94a3b8; font-size:0.85rem; font-weight:500;">Identificador de Usuario</label>
                        <div class="input-group">
                            <span class="input-group-text" style="background:#0f172a; border:1px solid #334155; border-right:none; color:#64748b; border-top-left-radius:10px; border-bottom-left-radius:10px;">
                                <i class="bi bi-person"></i>
                            </span>
                            <input type="text" name="Usuario" id="Usuario" required
                                   class="form-control form-control-dark" style="border-left:none;"
                                   placeholder="tu.usuario" autocomplete="username" />
                        </div>
                        <span class="text-danger mt-1 d-block" style="font-size:0.8rem">@Html.ValidationMessageFor(m => m.Usuario)</span>
                    </div>