From 51b10faa82436592f243bfa869b00f51f65ebd1d Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Fri, 17 Apr 2026 00:07:10 -0500
Subject: [PATCH] Update login.php

---
 login.php | 114 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 72 insertions(+), 42 deletions(-)

diff --git a/login.php b/login.php
index 665ef38..ffba646 100644
--- a/login.php
+++ b/login.php
@@ -127,7 +127,7 @@ $colorDark = adjustColor($color, -40);
         /* ── Panel izquierdo — branding ─────────────────────── */
         .brand-panel {
             flex: 1;
-            background: linear-gradient(145deg, var(--brand-dark) 0%, var(--brand) 60%, color-mix(in srgb, var(--brand) 70%, #fff) 100%);
+            background: #fff;
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -143,7 +143,7 @@ $colorDark = adjustColor($color, -40);
             content: '';
             position: absolute;
             border-radius: 50%;
-            background: rgba(255,255,255,0.07);
+            background: color-mix(in srgb, var(--brand) 7%, transparent);
             animation: float 8s ease-in-out infinite;
         }
         .brand-panel::before {
@@ -178,28 +178,26 @@ $colorDark = adjustColor($color, -40);
         .brand-icon-fallback {
             width: 90px; height: 90px;
             border-radius: 22px;
-            background: rgba(255,255,255,0.18);
-            backdrop-filter: blur(6px);
+            background: color-mix(in srgb, var(--brand) 12%, transparent);
             display: flex; align-items: center; justify-content: center;
             margin-bottom: 1.6rem;
             font-size: 2.6rem;
-            color: #fff;
+            color: var(--brand);
             animation: logoIn 0.7s ease both;
         }
 
         .brand-name {
             font-size: 1.7rem;
             font-weight: 800;
-            color: #fff;
+            color: var(--brand);
             text-align: center;
             line-height: 1.2;
             letter-spacing: -0.01em;
-            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
             animation: slideUp 0.6s 0.1s ease both;
         }
         .brand-sub {
             font-size: 1rem;
-            color: rgba(255,255,255,0.78);
+            color: var(--brand-dark);
             text-align: center;
             margin-top: 0.5rem;
             animation: slideUp 0.6s 0.2s ease both;
@@ -213,14 +211,13 @@ $colorDark = adjustColor($color, -40);
             animation: slideUp 0.6s 0.35s ease both;
         }
         .brand-badge {
-            background: rgba(255,255,255,0.15);
-            backdrop-filter: blur(4px);
-            color: #fff;
-            border: 1px solid rgba(255,255,255,0.25);
+            background: color-mix(in srgb, var(--brand) 10%, transparent);
+            color: var(--brand-dark);
+            border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
             padding: 5px 14px;
             border-radius: 100px;
             font-size: 0.78rem;
-            font-weight: 500;
+            font-weight: 600;
         }
 
         @keyframes slideUp {
@@ -232,15 +229,36 @@ $colorDark = adjustColor($color, -40);
         .form-panel {
             width: 420px;
             min-width: 340px;
-            background: #fff;
+            background: linear-gradient(145deg, var(--brand-dark) 0%, var(--brand) 60%, color-mix(in srgb, var(--brand) 70%, #fff) 100%);
             display: flex;
             flex-direction: column;
             justify-content: center;
             padding: 3rem 2.6rem;
-            box-shadow: -6px 0 40px rgba(0,0,0,0.10);
+            box-shadow: 6px 0 40px rgba(0,0,0,0.18);
             position: relative;
+            overflow: hidden;
             animation: slideIn 0.5s ease both;
         }
+        .form-panel::before,
+        .form-panel::after {
+            content: '';
+            position: absolute;
+            border-radius: 50%;
+            background: rgba(255,255,255,0.07);
+            animation: float 8s ease-in-out infinite;
+            pointer-events: none;
+            z-index: 0;
+        }
+        .form-panel::before {
+            width: 320px; height: 320px;
+            bottom: -110px; right: -90px;
+            animation-delay: 1.5s;
+        }
+        .form-panel::after {
+            width: 200px; height: 200px;
+            top: -70px; left: -50px;
+            animation-delay: 4.5s;
+        }
 
         @keyframes slideIn {
             from { opacity: 0; transform: translateX(30px); }
@@ -250,82 +268,94 @@ $colorDark = adjustColor($color, -40);
         .form-label {
             font-size: 0.87rem;
             font-weight: 600;
-            color: #374151;
+            color: rgba(255,255,255,0.9);
+            position: relative; z-index: 1;
         }
         .form-control {
             padding: 0.72rem 1rem;
             border-radius: 10px;
-            border: 1.5px solid #e5e7eb;
+            border: 1.5px solid rgba(255,255,255,0.35);
+            background: rgba(255,255,255,0.18);
+            color: #fff;
             font-size: 0.95rem;
-            transition: border-color .2s, box-shadow .2s;
+            transition: border-color .2s, box-shadow .2s, background .2s;
         }
+        .form-control::placeholder { color: rgba(255,255,255,0.5); }
         .form-control:focus {
-            border-color: var(--brand);
-            box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
+            border-color: rgba(255,255,255,0.85);
+            box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
             outline: none;
+            background: rgba(255,255,255,0.25);
+            color: #fff;
         }
         .input-group .form-control { border-right: none; border-radius: 10px 0 0 10px; }
         .input-group .btn-eye {
-            border: 1.5px solid #e5e7eb;
+            border: 1.5px solid rgba(255,255,255,0.35);
             border-left: none;
-            background: #fff;
+            background: rgba(255,255,255,0.18);
             border-radius: 0 10px 10px 0;
-            color: #6b7280;
+            color: rgba(255,255,255,0.7);
             padding: 0 14px;
             transition: color .2s;
         }
-        .input-group .btn-eye:hover { color: var(--brand); }
+        .input-group .btn-eye:hover { color: #fff; }
 
         .btn-login {
-            background: linear-gradient(135deg, var(--brand), var(--brand-dark));
+            background: rgba(255,255,255,0.95);
             border: none;
-            color: #fff;
+            color: var(--brand-dark);
             width: 100%;
             padding: 0.82rem;
             border-radius: 12px;
             font-weight: 700;
             font-size: 1rem;
             letter-spacing: 0.02em;
-            transition: transform .18s, box-shadow .18s;
-            position: relative;
+            transition: transform .18s, box-shadow .18s, background .18s;
+            position: relative; z-index: 1;
             overflow: hidden;
         }
-        .btn-login::after {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background: rgba(255,255,255,0);
-            transition: background .2s;
-        }
         .btn-login:hover:not(:disabled) {
             transform: translateY(-2px);
-            box-shadow: 0 8px 28px color-mix(in srgb, var(--brand) 45%, transparent);
+            box-shadow: 0 8px 28px rgba(0,0,0,0.3);
+            background: #fff;
         }
-        .btn-login:hover:not(:disabled)::after { background: rgba(255,255,255,0.08); }
         .btn-login:disabled { opacity: 0.65; cursor: not-allowed; }
 
         .form-title {
             font-size: 1.5rem;
             font-weight: 800;
-            color: #111827;
+            color: #fff;
             margin-bottom: 0.2rem;
+            position: relative; z-index: 1;
         }
         .form-subtitle {
             font-size: 0.88rem;
-            color: #6b7280;
+            color: rgba(255,255,255,0.78);
             margin-bottom: 2rem;
+            position: relative; z-index: 1;
         }
 
+        .form-panel .alert {
+            background: rgba(255,255,255,0.18);
+            border-color: rgba(255,255,255,0.3);
+            color: #fff;
+            position: relative; z-index: 1;
+        }
+        .form-panel .form-group,
+        .form-panel .mb-3,
+        .form-panel .mb-4 { position: relative; z-index: 1; }
+
         .dev-footer {
             position: absolute;
             bottom: 1rem;
             left: 0; right: 0;
             text-align: center;
             font-size: 0.75rem;
-            color: #d1d5db;
+            color: rgba(255,255,255,0.4);
+            z-index: 1;
         }
-        .dev-footer a { color: #9ca3af; text-decoration: none; }
-        .dev-footer a:hover { color: var(--brand); }
+        .dev-footer a { color: rgba(255,255,255,0.6); text-decoration: none; }
+        .dev-footer a:hover { color: #fff; }
 
         /* Mobile */
         @media (max-width: 700px) {