.text-titulojrg {
				color: #0464A1 !important; /* tu azul organizacional */
			}
			
			.btn-primaryjrg {
			  background: linear-gradient(180deg, #0580D0, #0464A1) !important;
			  border: 1px solid #034B79 !important;
			  color: #ffffff !important;
			  border-radius: 8px;
			  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
			  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
			}

			/* Asegúrate de usar tu clase .btn-primaryjrg en el hover */
			.btn-primaryjrg:hover,
			.btn-primaryjrg:focus,
			.btn-primaryjrg:active,
			.btn-primaryjrg.active,
			.btn-primaryjrg.focus {
			  background: linear-gradient(180deg, #0464A1, #034B79) !important;
			  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
			  transform: translateY(-1px);
			  color: #ffffff !important;
			}
			
			.icon-input {
				position: absolute;
				left: 12px;
				top: 50%;
				transform: translateY(-50%);
				font-size: 1.5rem;
				color: #6c757d;
				pointer-events: none;
				z-index: 10;  /* <--- AGREGA ESTA LÍNEA */
			}

			/* Asegura el padding SIEMPRE (normal, foco, con texto, etc.) */
			.form-floating.input-icon-left > .form-control,
			.form-floating.input-icon-left > .form-control:focus,
			.form-floating.input-icon-left > .form-control:not(:placeholder-shown) {
				padding-left: 2.7rem !important;   /* puedes subir a 3rem si quieres más espacio */
			}

			/* Mueve también el label flotante */
			.form-floating.input-icon-left > label {
				padding-left: 2.7rem !important;
			}
			
			.form-floating > label {
				color: #6c757d !important; 
			}
			
			 .form-control:focus {
				border-color: #034B79 !important;  /* azul un poco más oscuro que 0464A1 */
				box-shadow: none !important;
			  }
			  
			.card-login {
				border-radius: 18px;
				background: linear-gradient(180deg, #ffffff, #f7f9fc);  /* blanco -> muy claro */
				border: 1px solid rgba(0, 0, 0, 0.06);                  /* borde suave */
				box-shadow:
					0 10px 25px rgba(0, 0, 0, 0.18),   /* sombra principal */
					0 1px 0 rgba(255, 255, 255, 0.8);  /* línea clarita arriba = efecto 3D */
				transition: transform 0.15s ease, box-shadow 0.15s ease;
			}

			.card-login:hover {
				transform: translateY(-2px);
				box-shadow:
					0 14px 35px rgba(0, 0, 0, 0.24),
					0 1px 0 rgba(255, 255, 255, 0.9);
			}

			.alert-login-error {
				background-color: #fdecea;          /* fondo rojo muy claro */
				border: 1px solid #f5c2c7;          /* borde rojo suave */
				color: #b02a37;                     /* texto rojo oscuro */
				font-size: 13px;                    /* letra pequeña */
				padding: 8px 12px;
				border-radius: 6px;
				text-align: center;
				margin-bottom: 12px;
			}

				/* boton pefil */


			.profile-btn {
				background: linear-gradient(90deg, #f5f5f5, #dcdcdc);
				border: 1px solid rgba(255, 255, 255, 0.4);
				box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
				color: #000;
			}

			.profile-btn:hover {
				background: linear-gradient(90deg, #ffffff, #e5e5e5);
				color: #000;
			}

			.profile-name {
				font-size: 0.9rem;
				font-weight: 500;
			}

			.profile-avatar {
				width: 28px;
				height: 28px;
				background: #ffffff;          /* Fondo del circulito */
				color: #0464A1;               /* Color del ícono */
				font-size: 18px;              /* Tamaño del ícono */
				box-shadow: 0 0 4px rgba(0,0,0,0.3);
			}


	

			/* MENÚ DESPLEGABLE CON ESTILO TIPO PASTILLA */
			.profile-dropdown {
				background: linear-gradient(90deg, #f5f5f5, #dcdcdc);
				border-radius: 12px;                  /* antes 999px */
				border: 1px solid rgba(255, 255, 255, 0.7);
				box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
				padding: 0.25rem 0.5rem;
				min-width: 160px;  
			}

			/* Ítems del menú */
			.profile-dropdown .dropdown-item {
				background: transparent;
				color: #003366;            /* azul oscuro elegante */
				font-size: 0.9rem;
				border-radius: 999px;
				padding: 0.25rem 0.75rem;
			}

			/* Hover de los ítems */
			.profile-dropdown .dropdown-item:hover {
				background: rgba(255, 255, 255, 0.6);
				color: #000;
			}
			.header-label {
				display: block;
				text-align: left !important;
			}

			/*fondo encabezado */
			.header-azul-metal {
				background: linear-gradient(90deg, #01152a 0%, #023e6f 40%, #035c9b 70%, #01101f 100%);
				box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);   /* sombra externa suave */
			}

			.header-azul-metal2 {
				/* Degradé azul oscuro tipo metálico */
				background: linear-gradient(
					90deg,
					#01152a 0%,   /* azul muy oscuro */
					#023e6f 40%,  /* azul medio intenso */
					#035c9b 70%,  /* azul más brillante */
					#01101f 100%  /* vuelve a oscuro */
				);
			}

			.header-right {
				padding-right: 40px;  /* derecha 40px */
				padding-left: 40px;   /* si también quieres 40px a la izquierda */
			}
			.header-separator {
				height: 3px;
				background: linear-gradient(
					90deg,
					rgba(255, 255, 255, 0.4),
					rgba(255, 255, 255, 0.9),
					rgba(255, 255, 255, 0.4)
				);
			}
			.icon-helpdesk {
				height: 1em;        /* mismo alto que la letra de ese h2 */
				width: auto;        /* mantiene proporción */
				vertical-align: middle;
			}