* {
     box-sizing: border-box;
 }

 body {
     margin: 0;
     font-family: 'Inter', sans-serif;
     background: #f4f6f9;
 }

 /* CONTENEDOR */
 .login-container {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     padding: 16px;
 }

 /* CARD */
 .login-card {
     display: flex;
     flex-direction: column;
     width: 100%;
     max-width: 420px;
     background: #fff;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }

 /* LEFT */
 .login-left {
     padding: 24px;
 }

 /* BRAND */
 .brand {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 16px;
 }

 .logo {
     /*background: linear-gradient(135deg, #6c8cff, #6fd3a3);*/
     color: #fff;
     font-weight: bold;
     padding: 6px 10px;
     border-radius: 8px;
     font-size: 14px;
 }

 .logo img {
     width: 180px;
 }

 /* TEXT */
 h2 {
     margin: 0;
     font-size: 20px;
     color: #1e293b;
 }

 .subtitle {
     font-size: 13px;
     color: #64748b;
     margin-bottom: 20px;
 }

 /* INPUT */
 .form-group {
     position: relative;
     margin-bottom: 18px;
 }

 .form-group input {
     width: 100%;
     padding: 14px 12px;
     border-radius: 10px;
     border: 1px solid #d1d5db;
     font-size: 14px;
 }

 .form-group label {
     position: absolute;
     top: 50%;
     left: 12px;
     transform: translateY(-50%);
     font-size: 13px;
     color: #9ca3af;
     background: #fff;
     padding: 0 4px;
     transition: 0.25s;
 }

 .form-group input:focus+label,
 .form-group input:valid+label {
     top: -6px;
     font-size: 11px;
     color: #6c8cff;
 }

 /* BUTTON */
 .btn-primary {
     width: 100%;
     background: #2563eb;
     /* azul base (tipo Stripe/LinkedIn vibes) */
     color: #fff;
     padding: 14px;
     border-radius: 10px;
     border: none;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.25s ease;
 }

 .btn-primary:hover {
     background: #1d4ed8;
     /* más profundo */
     box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
     transform: translateY(-1px);
 }

 .btn-primary:active {
     background: #1e40af;
     transform: scale(0.98);
 }

 .btn-primary:focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
 }

 /* DIVIDER */
 .divider {
     height: 1px;
     background: #e5e7eb;
     margin: 20px 0;
 }

 /* HELP */
 .help {
     font-size: 13px;
     color: #64748b;
     text-align: center;
 }

 .help a {
     color: #6c8cff;
     font-weight: 500;
     text-decoration: none;
 }

 /* RIGHT IMAGE (MOBILE HIDDEN) */
 .login-right {
     display: none;
 }

 .requerido.error {
     border-color: #ef4444;
     background: #fff5f5;
 }

 button:disabled {
     opacity: .7;
     cursor: not-allowed;
 }

 .loader {
     width: 16px;
     height: 16px;
     border: 3px solid white;
     border-top: 3px solid transparent;
     border-radius: 50%;
     animation: spin .7s linear infinite;
     display: none;
 }

 .btnprimary.loadingbtn {
     display: block;
 }


 /* ========================= */
 /* 📱 TABLET (>= 768px) */
 /* ========================= */
 @media (min-width: 768px) {

     .login-card {
         flex-direction: row;
         max-width: 900px;
         height: 420px;
     }

     .login-left {
         flex: 1;
         padding: 40px;
         display: flex;
         flex-direction: column;
         justify-content: center;
     }

     .login-right {
         display: block;
         flex: 1;
         background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab') center/cover;
         position: relative;
     }

     .login-right1 {
         flex: 1;
         position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .login-right .overlay {
         position: absolute;
         inset: 0;
         /* background: linear-gradient(135deg, rgba(108, 140, 255, 0.6), rgba(111, 211, 163, 0.6));*/
     }

     .logo-container {
         width: 200px;
         height: 120px;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .logo-container img {
         max-width: 100%;
         max-height: 100%;
         object-fit: contain;
     }

     h2 {
         font-size: 24px;
     }

     .subtitle {
         font-size: 14px;
     }
 }

 /* ========================= */
 /* 💻 DESKTOP GRANDE (>=1200px) */
 /* ========================= */
 @media (min-width: 1200px) {

     .login-card {
         max-width: 1000px;
         height: 460px;
     }

     .login-left {
         padding: 50px;
     }

     h2 {
         font-size: 26px;
     }
 }

 @keyframes spin {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }