html, body {
				margin: 0px;
				padding: 0px;
				width: 100%;
				height: 100%;
			}

			body {
				background: url('/img/banner_opportunity.jpg?u=103f109d81627f798b98e5adbfe0decb'), #000;
				background-size: 100%;
				background-position: 0px 0px;
				background-repeat: repeat;
			}

			@media only screen and (max-width: 900px) {
				body {
					background-size: 150%;
				}
			}

			@media only screen and (max-width: 400px) {
				body {
					background-size: 200%;
				}
			}

			.msg-error {
				color: #b53333 !important;
			}

			#logo-index {
				margin: 0 auto;
				margin-top: 15px;
				width: 400px;
				height: 170px;
				background: url(/img/logo-25.png) !important;
				background-size: 100%;
				background-position: center;
				background-repeat: no-repeat;
			}

			#panel-index {
				border: 1px solid #fff0;
				background: #fff;
				height: 340px;
				border-radius: 17px;
			}

			#cnt-login{
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
			}

			.login-form {
				margin: 0 auto;
				width: 300px;
				height: 340px;
				background: #fff;
				border-radius: 17px;
				z-index: 100000;
			}

			#content-graff-add {
				
			}

			#logo-opp {
				
			}


			.fieldset-login {
				border: 0;
				text-align: center !important;
			}

			.rec-clave {
				text-align: right;
				font-size: 0.6rem;
				color: #fff;
				cursor: pointer;
				user-select: none;
				padding: 5px;
			}


			label {
				color: white;
				padding: 5px;
			}

			input[type="text"], input[type="password"], input[type="email"] {
				border: 1px solid #143f71; border-radius: 10px; padding: 5px 3px 5px 4px; font-size: 0.7em; min-width: 248px; text-align: center; font-weight: normal; font-family: arial, sans-serif;
			}

			input[type="submit"] {
				border: 0 solid #fff; border-radius: 12px; background: #143F71; font-size: 1.2em; min-width: 255px; color: #fff; cursor: pointer; padding: 3px; font-weight: bold; font-family: arial, sans-serif;
			}


			input[type="submit"]:hover {
				#000000
			}

		

			/* === DESIGN SYSTEM OVERRIDES === */

			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			html, body {
				font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
				-webkit-font-smoothing: antialiased !important;
				-moz-osx-font-smoothing: grayscale !important;
				overflow: hidden !important;
			}

			body {
				background: #1e3a5f !important;
				background-image: none !important;
			}

			#cnt-login {
				width: 100% !important;
				height: 100% !important;
				display: flex !important;
				align-items: center !important;
				justify-content: center !important;
				background: linear-gradient(-45deg, #143F71, #1e3a5f, #0f172a, #254a75) !important;
				background-size: 400% 400% !important;
				animation: gradientBG 15s ease infinite !important;
				position: relative !important;
				overflow: hidden !important;
			}

			#cnt-login::before, #cnt-login::after {
				content: '' !important;
				position: absolute !important;
				width: 40vw !important;
				height: 40vw !important;
				border-radius: 50% !important;
				filter: blur(80px) !important;
				z-index: 0 !important;
			}

			#cnt-login::before {
				background: rgba(18, 51, 113, 0.8) !important;
				top: -10% !important;
				left: -10% !important;
				animation: float1 11s infinite ease-in-out !important;
			}

			#cnt-login::after {
				background: rgba(18, 51, 113, 0.8) !important;
				bottom: -10% !important;
				right: -10% !important;
				animation: float2 11s infinite ease-in-out !important;
			}

			@keyframes gradientBG {
				0% { background-position: 0% 50%; }
				50% { background-position: 100% 50%; }
				100% { background-position: 0% 50%; }
			}

			@keyframes float1 {
				0% { transform: translate(0, 0) scale(1); }
				33% { transform: translate(35vw, 12vh) scale(1.7); }
				48% { transform: translate(5vw, 82vh) scale(4); }
				66% { transform: translate(15vw, 25vh) scale(0.8); }
				100% { transform: translate(0, 0) scale(1); }
			}

			@keyframes float2 {
				0% { transform: translate(0, 0) scale(1); }
				33% { transform: translate(-35vw, -30vh) scale(0.7); }
				66% { transform: translate(-10vw, -45vh) scale(1.2); }
				83% { transform: translate(10vw, -5vh) scale(3.6); }
				100% { transform: translate(0, 0) scale(1); }
			}


			.login-form {
				width: 440px !important;
				height: auto !important;
				background: rgba(22, 60, 120, 0.88) !important;
				backdrop-filter: blur(12px) !important;
				-webkit-backdrop-filter: blur(12px) !important;
				border: 1px solid rgba(255, 255, 255, 0.12) !important;
				border-radius: 16px !important;
				padding: 40px 40px 36px 40px !important;
				box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35) !important;
				z-index: 100 !important;
				position: relative !important;
			}

			#panel-index {
				border: none !important;
				background: transparent !important;
				height: auto !important;
				border-radius: 0 !important;
			}

			#logo-index {
				margin: 0 auto 24px auto !important;
				width: 220px !important;
				height: 110px !important;
				background: url(/img/logo-25.png) !important;
				background-size: contain !important;
				background-position: center !important;
				background-repeat: no-repeat !important;
				opacity: 1 !important;
				filter: none !important;
			}

			.fieldset-login {
				border: 0 !important;
				padding: 0 !important;
				margin: 0 !important;
			}

			.fieldset-login legend,
			.login_legend {
				display: block !important;
				width: 100% !important;
				padding: 0 !important;
				margin-bottom: 8px !important;
			}

			.msg-error {
				color: #d44 !important;
				font-size: 0.84rem !important;
				min-height: 20px !important;
				text-align: center !important;
			}

			.line-view-data-panel {
				margin-bottom: 0 !important;
			}

			.line-view-data-panel .flex {
				display: block !important;
			}

			label {
				color: rgba(255, 255, 255, 0.85) !important;
				font-size: 0.78rem !important;
				padding: 0 0 6px 2px !important;
				display: block !important;
				letter-spacing: 0.5px !important;
				font-weight: 500 !important;
				text-transform: uppercase !important;
			}

			/* Fix Autofill Background for webkit browsers */
			input:-webkit-autofill,
			input:-webkit-autofill:hover, 
			input:-webkit-autofill:focus, 
			input:-webkit-autofill:active{
				-webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
				-webkit-text-fill-color: #1a202c !important;
			}

			input[type="text"],
			input[type="password"],
			input[type="email"] {
				width: 100% !important;
				background: rgba(255, 255, 255, 0.92) !important;
				border: 1px solid rgba(255,255,255,0.5) !important;
				border-radius: 12px !important;
				padding: 13px 16px !important;
				font-size: 0.95rem !important;
				color: #1a202c !important;
				font-family: inherit !important;
				transition: all 0.25s ease !important;
				outline: none !important;
				box-sizing: border-box !important;
				box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.05) !important;
				margin-bottom: 16px !important;
			}

			input[type="text"]:focus,
			input[type="password"]:focus,
			input[type="email"]:focus {
				box-shadow: 0 0 0 4px rgba(255,255,255,0.3) !important;
			}

			input[type="text"]::placeholder,
			input[type="password"]::placeholder,
			input[type="email"]::placeholder {
				color: #94a3b8 !important;
			}

			input[type="submit"] {
				width: 100% !important;
				background: #3898ec !important;
				border: none !important;
				border-radius: 12px !important;
				padding: 14px 18px !important;
				font-size: 1.05rem !important;
				font-weight: 600 !important;
				color: #ffffff !important;
				cursor: pointer !important;
				font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
				transition: all 0.2s ease !important;
				box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
				letter-spacing: 0.3px !important;
				margin-top: 20px !important;
			}

			input[type="submit"]:hover {
				background: #2b7bc6 !important;
				box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
				transform: translateY(-2px) !important;
			}

			input[type="submit"]:active {
				transform: translateY(0) !important;
				background: #1a5c9e !important;
				box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
			}

			.rec-clave {
				color: rgba(255,255,255,0.85) !important;
				font-size: 0.9rem !important;
				padding: 16px 2px 8px 2px !important;
				transition: all 0.2s ease !important;
				text-align: center !important;
				cursor: pointer !important;
				display: block !important;
				text-decoration: underline !important;
				text-underline-offset: 3px !important;
				letter-spacing: 0.2px !important;
			}

			.rec-clave:hover {
				color: #ffffff !important;
				text-decoration: underline !important;
			}

			#login-footer {
				position: fixed !important;
				bottom: 20px !important;
				left: 0 !important;
				width: 100% !important;
				text-align: center !important;
				color: rgba(255,255,255,0.35) !important;
				font-size: 0.72rem !important;
				letter-spacing: 0.5px !important;
				z-index: 10 !important;
			}

			.boton_ingreso {
				width: 100% !important;
				min-width: unset !important;
				background: #143F71 !important;
				border: none !important;
				border-radius: 10px !important;
				padding: 13px 18px !important;
				font-size: 0.95rem !important;
				font-weight: 600 !important;
				color: #ffffff !important;
				cursor: pointer !important;
				transition: all 0.2s ease !important;
				box-shadow: 0 1px 3px rgba(20,63,113,0.2), 0 0 0 1px rgba(20,63,113,0.1) !important;
			}

			.boton_ingreso:hover {
				background: #1a5293 !important;
				box-shadow: 0 4px 14px rgba(20,63,113,0.25) !important;
				transform: translateY(-1px) !important;
			}

			.caja_texto {
				width: 100% !important;
				min-width: unset !important;
				background: #f7f9fc !important;
				border: 1.5px solid #dce3ed !important;
				border-radius: 10px !important;
				padding: 13px 16px !important;
				font-size: 0.93rem !important;
				color: #1a202c !important;
				text-align: left !important;
				font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
				transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
				outline: none !important;
			}

			.caja_texto:focus {
				background: #fff !important;
				border-color: #3898ec !important;
				box-shadow: 0 0 0 3px rgba(56,152,236,0.13) !important;
			}

			#content-graff-add {
				display: none !important;
			}

			#content-msg-alert {
				display: none !important;
			}

			br {
				display: block !important;
				content: '' !important;
				margin: 6px 0 !important;
			}

			@media only screen and (max-width: 480px) {
				.login-form {
					width: calc(100% - 32px) !important;
					padding: 32px 24px 28px 24px !important;
					margin: 0 16px !important;
				}

				#logo-index {
					width: 130px !important;
					height: 70px !important;
					margin-bottom: 20px !important;
				}
			}